::-webkit-scrollbar{display:none}
.static {
  position: static
}

.fixed {
  position: fixed
}

.absolute {
  position: absolute
}

.relative {
  position: relative
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.left-0 {
  left: 0;
}

.left-5 {
  left: px2rem(5px);
}

.left-10 {
  left: px2rem(10px);
}

.left-15 {
  left: px2rem(15px);
}

.left-20 {
  left: px2rem(20px);
}

.left-25 {
  left: px2rem(25px);
}

.left-30 {
  left: px2rem(30px);
}

.left-35 {
  left: px2rem(35px);
}

.left-40 {
  left: px2rem(40px);
}

.left-50 {
  left: px2rem(50px);
}

.left-100 {
  left: px2rem(100px);
}

.right-0 {
  right: 0;
}

.right-5 {
  right: px2rem(5px);
}

.right-10 {
  right: px2rem(10px);
}

.right-15 {
  right: px2rem(15px);
}

.right-20 {
  right: px2rem(20px);
}

.right-25 {
  right: px2rem(25px);
}

.right-30 {
  right: px2rem(30px);
}

.right-35 {
  right: px2rem(35px);
}

.right-40 {
  right: px2rem(40px);
}

.top-0 {
  top: 0;
}

.top-5 {
  top: px2rem(5px);
}

.top-10 {
  top: px2rem(10px);
}

.top-15 {
  top: px2rem(15px);
}

.top-20 {
  top: px2rem(20px);
}

.top-25 {
  top: px2rem(25px);
}

.top-30 {
  top: px2rem(30px);
}

.top-35 {
  top: px2rem(35px);
}

.top-40 {
  top: px2rem(40px);
}

.bottom-0 {
  bottom: 0;
}

.bottom-5 {
  bottom: px2rem(5px);
}

.bottom-10 {
  bottom: px2rem(10px);
}

.bottom-15 {
  bottom: px2rem(15px);
}

.bottom-20 {
  bottom: px2rem(20px);
}

.bottom-25 {
  bottom: px2rem(25px);
}

.bottom-30 {
  bottom: px2rem(30px);
}

.bottom-35 {
  bottom: px2rem(35px);
}

.bottom-40 {
  bottom: px2rem(40px);
}

.bottom-100 {
  bottom: px2rem(100px);
}

.bottom-125 {
  bottom: px2rem(125px);
}

.bottom-150 {
  bottom: px2rem(150px);
}

// -----------------------


.w-0 {
  width: 0;
}

.w-10 {
  width: px2rem(10px);
}

.w-20 {
  width: px2rem(20px);
}

.w-30 {
  width: px2rem(30px);
}

.w-40 {
  width: px2rem(40px);
}

.w-50 {
  width: px2rem(50px);
}

.w-60 {
  width: px2rem(60px);
}

.w-70 {
  width: px2rem(70px);
}

.w-80 {
  width: px2rem(80px);
}

.w-90 {
  width: px2rem(90px);
}

.w-100 {
  width: px2rem(100px);
}

.w-1_3{
  width: 33.33%;
}

.w-1_4{
  width: 25%;
}

.w-1_5{
  width: 20%;
}

.w-1_6{
  width: 16.666%;
}

.h-10 {
  height: px2rem(10px);
}

.h-20 {
  height: px2rem(20px);
}

.h-30 {
  height: px2rem(30px);
}

.h-40 {
  height: px2rem(40px);
}

.h-50 {
  height: px2rem(50px);
}

.h-60 {
  height: px2rem(60px);
}

.h-70 {
  height: px2rem(70px);
}

.h-80 {
  height: px2rem(80px);
}

.h-90 {
  height: px2rem(90px);
}

.h-100 {
  height: px2rem(100px);
}


// ---------------------


// x轴(左右)
.px-5 {
  padding-left: px2rem(5px);
  padding-right: px2rem(5px);
}

.px-10 {
  padding-left: px2rem(10px);
  padding-right: px2rem(10px);
}


.px-15 {
  padding-left: px2rem(15px);
  padding-right: px2rem(15px);
}

.px-20 {
  padding-left: px2rem(20px);
  padding-right: px2rem(20px);
}

.px-25 {
  padding-left: px2rem(25px);
  padding-right: px2rem(25px);
}

.px-30 {
  padding-left: px2rem(30px);
  padding-right: px2rem(30px);
}

.px-35 {
  padding-left: px2rem(35px);
  padding-right: px2rem(35px);
}

.px-40 {
  padding-left: px2rem(40px);
  padding-right: px2rem(40px);
}

.px-45 {
  padding-left: px2rem(45px);
  padding-right: px2rem(45px);
}

.px-50 {
  padding-left: px2rem(50px);
  padding-right: px2rem(50px);
}

// y轴(上下)
.py-5 {
  padding-top: px2rem(5px);
  padding-bottom: px2rem(5px);
}

.py-10 {
  padding-top: px2rem(10px);
  padding-bottom: px2rem(10px);
}

.py-15 {
  padding-top: px2rem(15px);
  padding-bottom: px2rem(15px);
}

.py-20 {
  padding-top: px2rem(20px);
  padding-bottom: px2rem(20px);
}

.py-25 {
  padding-top: px2rem(25px);
  padding-bottom: px2rem(25px);
}

.py-30 {
  padding-top: px2rem(30px);
  padding-bottom: px2rem(30px);
}

.py-35 {
  padding-top: px2rem(35px);
  padding-bottom: px2rem(35px);
}

.py-40 {
  padding-top: px2rem(40px);
  padding-bottom: px2rem(40px);
}

.py-45 {
  padding-top: px2rem(45px);
  padding-bottom: px2rem(45px);
}

.py-50 {
  padding-top: px2rem(50px);
  padding-bottom: px2rem(50px);
}

//底部
.pb-10 {
  padding-bottom: px2rem(10px);
}

.pb-20 {
  padding-bottom: px2rem(20px);
}

.pb-30 {
  padding-bottom: px2rem(30px);
}

.pb-40 {
  padding-bottom: px2rem(40px);
}

.pb-50 {
  padding-bottom: px2rem(50px);
}

//顶部

.pt-10 {
  padding-top: px2rem(10px);
}

.pt-20 {
  padding-top: px2rem(20px);
}



.pt-30 {
  padding-top: px2rem(30px);
}

.pt-40 {
  padding-top: px2rem(40px);
}

.pt-50 {
  padding-top: px2rem(50px);
}

.pt-60 {
  padding-top: px2rem(60px);
}

//左边
.pl-10 {
  padding-left: px2rem(10px);
}
.pl-20 {
  padding-left: px2rem(20px);
}

.pl-30 {
  padding-left: px2rem(30px);
}

//右边
.pr-10 {
  padding-right: px2rem(10px);
}

.pr-20 {
  padding-right: px2rem(20px);
}

.pr-30 {
  padding-right: px2rem(30px);
}

// ---------------------------------

//顶部
.mt-5 {
  margin-top: px2rem(5px);
}

.mt-10 {
  margin-top: px2rem(10px);
}

.mt-15 {
  margin-top: px2rem(15px);
}

.mt-20 {
  margin-top: px2rem(20px);
}

.mt-25 {
  margin-top: px2rem(25px);
}

.mt-30 {
  margin-top: px2rem(30px);
}

.mt-35 {
  margin-top: px2rem(35px);
}

.mt-40 {
  margin-top: px2rem(40px);
}

.mt-45 {
  margin-top: px2rem(45px);
}

.mt-50 {
  margin-top: px2rem(50px);
}


//右边
.mr-5 {
  margin-right: px2rem(5px);
}

.mr-10 {
  margin-right: px2rem(10px);
}

.mr-15 {
  margin-right: px2rem(15px);
}

.mr-20 {
  margin-right: px2rem(20px);
}

.mr-25 {
  margin-right: px2rem(25px);
}

.mr-30 {
  margin-right: px2rem(30px);
}

.mr-35 {
  margin-right: px2rem(35px);
}

.mr-40 {
  margin-right: px2rem(40px);
}

//左边
.ml-5 {
  margin-left: px2rem(5px);
}

.ml-10 {
  margin-left: px2rem(10px);
}

.ml-15 {
  margin-left: px2rem(10px);
}

.ml-20 {
  margin-left: px2rem(20px);
}

.ml-25 {
  margin-left: px2rem(25px);
}

.ml-30 {
  margin-left: px2rem(30px);
}

.ml-35 {
  margin-left: px2rem(35px);
}

.ml-40 {
  margin-left: px2rem(40px);
}

//下边
.mb-10 {
  margin-bottom: px2rem(10px);
}

.mb-20 {
  margin-bottom: px2rem(20px);
}

.mb-30 {
  margin-bottom: px2rem(30px);
}

.mb-40 {
  margin-bottom: px2rem(40px);
}


.mx-10 {
  margin-left: px2rem(10px);
  margin-right: px2rem(10px);
}

.mx-20 {
  margin-left: px2rem(20px);
  margin-right: px2rem(20px);
}

.mx-30 {
  margin-left: px2rem(30px);
  margin-right: px2rem(30px);
}

.mx-50 {
  margin-left: px2rem(50px);
  margin-right: px2rem(50px);
}


.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-5 {
  margin-top: px2rem(5px);
  margin-bottom: px2rem(5px);
}

.my-10 {
  margin-top: px2rem(10px);
  margin-bottom: px2rem(10px);
}

.my-20 {
  margin-top: px2rem(20px);
  margin-bottom: px2rem(20px);
}

.my-30 {
  margin-top: px2rem(30px);
  margin-bottom: px2rem(30px);
}

// ------------------------------

.f10 {
  font-size: px2rem(10px);
}

.f12 {
  font-size: px2rem(12px);
}

.f14 {
  font-size: px2rem(14px);
}

.f16 {
  font-size: px2rem(16px);
}

.f18 {
  font-size: px2rem(18px);
}

.f20 {
  font-size: px2rem(20px);
}

.f22 {
  font-size: px2rem(22px);
}

.f24 {
  font-size: px2rem(24px);
}

.f26 {
  font-size: px2rem(26px);
}

.f28 {
  font-size: px2rem(28px);
}

.f30 {
  font-size: px2rem(30px);
}

.f32 {
  font-size: px2rem(32px);
}

.f34 {
  font-size: px2rem(34px);
}

.f36 {
  font-size: px2rem(36px);
}

.f38 {
  font-size: px2rem(38px);
}

.f40 {
  font-size: px2rem(40px);
}

.f42 {
  font-size: px2rem(42px);
}

.f44 {
  font-size: px2rem(44px);
}

.f50 {
  font-size: px2rem(50px);
}

.f56 {
  font-size: px2rem(56px);
}

.f60 {
  font-size: px2rem(60px);
}

// --------------------

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

// 


/* 清除浮动 */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

// 可见性

.visible {
  visibility: visible;
}



.invisible {
  visibility: hidden;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

.inline-block{
  display: inline-block;
}


// 




.flex {
  display: flex
}

.flex-row {
  flex-direction: row
}

.flex-col {
  flex-direction: column
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}


.flex-grow-0 {
  flex-grow: 0
}

.flex-grow {
  flex-grow: 1
}




.justify-start {
  justify-content: flex-start
}

.justify-end {
  justify-content: flex-end
}

.justify-center {
  justify-content: center
}

.justify-between {
  justify-content: space-between
}

.justify-around {
  justify-content: space-around
}

.justify-evenly {
  justify-content: space-evenly
}

.justify-items-start {
  justify-items: start
}

.justify-items-end {
  justify-items: end
}

.justify-items-center {
  justify-items: center
}

.justify-items-stretch {
  justify-items: stretch
}

.content-center {
  align-content: center
}

.content-start {
  align-content: flex-start
}

.content-end {
  align-content: flex-end
}

.content-between {
  align-content: space-between
}

.content-around {
  align-content: space-around
}

.content-evenly {
  align-content: space-evenly
}

.flex-shrink-0 {
  flex-shrink: 0
}

.flex-shrink {
  flex-shrink: 1
}


.items-start {
  align-items: flex-start
}

.items-end {
  align-items: flex-end
}

.items-center {
  align-items: center
}

.items-baseline {
  align-items: baseline
}

.items-stretch {
  align-items: stretch
}

.flex-shrink-0 {
  flex-shrink: 0
}

.flex-shrink {
  flex-shrink: 1
}

.flex-1 {
  flex: 1 1 0%
}


.flex-auto {
  flex: 1 1 auto
}


// 
.overflow-ellipsis {
  text-overflow: ellipsis
}

.overflow-hidden {
  overflow: hidden;
}


.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


.break-all {
  word-break: break-all
}

.break-words {
  overflow-wrap: break-word
}

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.text-right {
  text-align: right
}



// -------------

.fw-600 {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}


.fw-400 {
  font-weight: 400;
}

.fw-bold{
  font-weight: bold;
}


.box-content {
  box-sizing: content-box
}

.radius-5{
  border-radius: px2rem(5px);
}


.radius-10{
  border-radius: px2rem(10px);
}

.radius-15{
  border-radius: px2rem(15px);
}



.overflow-x-scroll {
  overflow-x: scroll
}

.overflow-y-scroll {
  overflow-y: scroll
}


.w-full{
  width: 100%;
}
.h-full{
  height: 100%;
}
.max-w-full{
  max-width: 100%;
}


.leading-normal {
  line-height: 1.5
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.indent-30{
  text-indent: px2rem(30px);
}
.index-2em{
  text-indent: 2em;
}